<template>
	<view class="container">		
		<view class="header" :style="{top:screenHeight}">	
			<uni-search-bar class="uni-mt-10" radius="5" :placeholder="_place" clearButton="auto" :value="searchVal" cancelButton="none" @confirm="confirmSearch" />
			
		</view>
		<view >
			<map class="mapV" show-location="true" :polyline="_polyline" @labeltap="clickMarker"  :latitude="myPos.latitude" :longitude="myPos.longitude"  :scale=scale :markers="markers">
			</map>
		</view>
		<view v-if="show_box" class="bottom_box">
			<text class="cell-icon yticon icon-xia" @click="clickDown()" style="position: fixed;left: 50%;font-size: 20px;color:#fff"></text>
			<view style="margin-top: 34rpx;">
				<scroll-view class="scroll-box" scroll-x="true">
						<view class="course_v" v-for="(item, index) in course_list" :key="index">
							<image class="course_img" :src="item.discover"></image>
							<text class="cell-icon yticon icon-player player_btn" @click="toCourse(item.id)"></text>
						</view>
				</scroll-view>
				
			</view>
		
		</view>
		<view v-if="show_box" class="box_btn">
			<view class="map_btn" @click="viewLine(1)">查看路线</view>
			<view class="map_btn" @click="viewLine(2)">查看教室</view>
			<view class="map_btn">大家再看</view>
		</view>
		<view v-if="show_img" >
			<view class="privacy">
				<text v-if="show_left_icon" class="cell-icon yticon icon-zuo left-icon" @click="preImg()"></text>
				<view class="privacy-content">
					<image style="width: 600rpx;height: 800rpx;border-radius: 40rpx;" :src="line_pic_arr[current_line_pic_index]"></image>
				</view>
				<text v-if="show_right_icon" class="cell-icon yticon icon-you right-icon" @click="nextImg()"></text>
			</view>
			<view class="close_circle close" @click="closeImage()"></view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'  
	import Api from '@/common/api';
	export default {
		
		data() {
			return {
					scale:14,
					_place:'请输入你感兴趣的校区',
					isFocused:false,
					searchVal:'',
					value: '',
				    range: [],
					_selectPlace:'按类型筛选',
					
					// 我的定位经纬度信息
					myPos: {
						latitude: '29.486604830668778',
						longitude: '106.45813652314246',
					},
					markers2: [
						{
						    id: 1,
						    latitude: '29.486604830668778',
						    longitude: '106.45813652314246',
						    width: 128,
						    height: 85,
						    // iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
							iconPath:'/static/temp/pos.png',
						    // callout: {
						    //     content: '打卡范围1',
						    //     color: '#000',
						    //     fontSize: 12,
						       
						    //     padding: 5,
						    //     borderRadius: 3,
						    //     display: 'ALWAYS',
						    //     textAlign: 'center',
						    //   },
							  label:{
								  // content:'大水井思源夜校中心'+'\n'+'重庆市沙坪坝区梨',
								  content:'大水井思源夜校中心',
								  color:'#333',
								  fontSize:13,
								  borderColor:'#000',
								  anchorX:-60,
								  anchorY:-84,
								
							  }
						  },
						  {
						      id: 2,
						      latitude: '29.486604830668778',
						      longitude: '106.45813652314246',
						      width: 128,
						      height: 85,
						      // iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
						  	  iconPath:'/static/temp/pos.png',
						  	  label:{
						  		  content:'重庆市沙坪坝区梨树湾...',
						  		  color:'#333',
						  		  fontSize:10,
						  		  borderColor:'#000',
						  		  anchorX:-60,
						  		  anchorY:-68,
						  		  // bgColor:'#f1e',
						  		  
						  	  }
						    },
						
					],
					markers: [],
					show_box:false,
					course_list:[],
					show_img:false,
					line_pic_arr:[],
					current_line_pic_index:0,
					campus_id:0,
					show_right_icon:true,
					show_left_icon:false,
					_polyline:[]
					
				}
		},
		
		onLoad() {
			this.getMapLine();
			
		},
		beforeCreate(){
				
		},
		beforeDestroy(){
			
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','user_role']),
			screenHeight: function() {
				    return (uni.getSystemInfoSync().statusBarHeight+uni.getMenuButtonBoundingClientRect().height)*2+'rpx';
			}  
			
		},
		onShow(){
			// 获取当前位置
			this._getlocation();
			this.campusList();
			this.searchCampulTypeList();
			
		},
		onReady(){
			
		},
		onPageScroll(e){
			
		},
		methods: {
			confirmSearch(e){
				this.searchVal=e.value;
				this.campusList();
			},
			toCourse(id){
				this.$api.msg(`课程`+id)
				console.log(id)
			},
			focusChange(){
				
				this.isFocused=true;
			},
			blurChange(){
				this.isFocused=false;
			},
			_getlocation() {
			
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						that.myPos = res;
					}
				});
			},
			async campusList(){
				
				let params ={key_word:this.searchVal}
				let data = await Api.apiCall('get',Api.apiName.campus_marker_list,params);
				if(!data){
					return;
				}
				this.markers=data.data;
			},
			async searchCampulTypeList(){
				let data = await Api.apiCall('get',Api.apiName.search_campus_type,{},true,false);
				if(!data){
					return;
				}
				this.range=data.data;
			},
			clickMarker(e){
				let _campus_id = e.detail.markerId.toString();
				this.campus_id = _campus_id.substring(4);
				this.courseList();
			},
			clickDown(){
				this.show_box=false;
			},
			async courseList(){
				let params ={campus_id:this.campus_id};
				let data = await Api.apiCall('get',Api.apiName.course_list,params,true);
				if(!data||data.data.length==0){
					this.show_box=false;
					return;
				}
				// this.scale=20;
				this.show_box=true;
				this.course_list=data.data;
				this.line_pic_arr=data.data.line_pics;
			},
			closeImage(){
				this.show_img=false;
			},
			async viewLine(type=1){
				
				let params ={campus_id:this.campus_id};
				let data = await Api.apiCall('get',Api.apiName.campus_detail,params,true);
				if(!data.data.line_pics && type==1){
					this.$api.msg(`暂无导航图片`)
					return;
				}
				if(!data.data.room_pics && type==2){
					this.$api.msg(`暂无教室图片`)
					return;
				}
				this.show_box=false;
				this.show_img=true;
				this.current_line_pic_index=0;
				if(type==1){
					this.line_pic_arr = data.data.line_pics;
				}else{
					this.line_pic_arr = data.data.room_pics;
				}
				this.show_right_icon=true;
				this.show_left_icon=false;
			},
			nextImg(){
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;				
				if(this.current_line_pic_index<len-1){
					this.current_line_pic_index++;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;	
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}
				return;
			},
			preImg(){
				this.show_left_icon=false;
				this.show_right_icon=false;
				let len = this.line_pic_arr.length;
				if(this.current_line_pic_index>0){
					this.current_line_pic_index--;
				}
				if(this.current_line_pic_index>0){
					this.show_left_icon=true;
				}
				if(this.current_line_pic_index<len-1){
					this.show_right_icon=true;
				}
				
			},
			async getMapLine(){
				let data = await Api.apiCall('get',Api.apiName.map_line,{},true,false);
				if(!data){
					return;
				}
				this._polyline=data.data;
				console.log('mapline')
			},
		},
	

	}
</script>

<style lang="scss">	

	page {
		// background: #000;
		
	}
	.header{
		position: absolute;
		top: 65px;
		left: 0px;
		right: 0px;
		z-index: 1;
	}
		
	.mapV {
		width: calc(100vw);
		height: 100vh;    
	}
	.bottom_box{
		height: 240rpx;
		// border:1px solid red;
		z-index:22;
		width: 100%;
		bottom: 0rpx;
		position: fixed;
		background: rgba(51,51, 51, 0.5);
	}
	.course_v{
		width: 160rpx;
		height: 202rpx;
		margin-left: 20rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column-reverse;
		align-items: center;
		// background-color: red;
		// border: 1px solid red;
		color: white;
		font-size: 12px;
}
	.course_img{
		width: 160rpx;
		height: 202rpx;
		border-radius: 24rpx;
		display: table;
	}
	.scroll-box{
		white-space: nowrap
	}
	.box_btn{
		
		height: 218rpx;
		width: 280rpx;
		position: absolute;
	    top: 66%;
	    left:50%;
	    transform: translate(-50%,-50%);
	}
	.map_btn{
		width: 100px;
		height: 50rpx;
		background-color: #90bbda;
		position: relative;
		left: 50%;
		top: 30rpx;
		-webkit-transform: translate(-50%, -50%);
		text-align: center;
		border-radius: 10rpx;
		margin-top: 14rpx;
		font-size: 12px;
		font-weight: 800;
		line-height: 50rpx;
		color: #fff;
	}
	.privacy{
		width: 600rpx;
		height: 800rpx;
		// border: 1px solid red;
		margin: auto;
		position: absolute;
		top: 220rpx;
		left: 40rpx;
		right: 40rpx;
		border-radius: 40rpx;
		
		z-index: 1;
	}
	
	.privacy-content{
		height: 800rpx;
		
	}
	.close_circle{
		position: fixed;
		top: 1030rpx;
		left: 20px;
		right: 20px;
		margin: auto;
		height: 60rpx;
		width: 60rpx;
		border: 1px solid #90bbda;
		color:#90bbda;
		text-align: center;
		border-radius: 50%;
		z-index:1;
		font-size: 12px;
		line-height: 60rpx;
	}
	.close::before{
		content: "\2716";
	}
	.left-icon{
		position: absolute;
		top: 50%;
		left: 20rpx;
		border: 1px solid #90bbda;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color:#90bbda
	}
	.right-icon{
		position: absolute;
		top: 50%;
		right: 20rpx;
		border: 1px solid #90bbda;
		border-radius: 50%;
		height: 60rpx;
		width: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #90bbda;
	}
	.player_btn{
		position: absolute;
		z-index: 2;
		top: 72rpx;
	}
</style>
